<template>
  <div class="back_icon">
    <LogoutOutlined class="back" @click="handleClick" />
  </div>
</template>
<script setup lang="ts">
import { LogoutOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

const emits = defineEmits(['back-before']);
const router = useRouter();

const handleClick = () => {
  router.back();
  emits('back-before');
};
</script>
<style scoped lang="less">
.back_icon {
  width: 30px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-app-region: none;
  color: #fff;
  .back {
    padding: 0 5px;
    position: absolute;
    top: 45%;
    right: 0;
    transition: all 0.3s ease-in-out;
    transform: translate(100%, 0);
  }
  &:hover {
    .back {
      transform: translate(0, 0);
    }
  }
}
</style>
